{extend name="property/public/insidePageBase" /}
{block name="title"}添加巡检位{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main" id="app">
        <div class="layui-form  layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline"><label class="layui-form-label">巡检位置</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model="site_name" placeholder="请输入巡检位置名称" class="layui-input" lay-verify="required" autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-form-item layui-inline" pane="">
                    <label class="layui-form-label">位置状态</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="is_show" lay-filter="is_show" autocomplete="off" value="1" title="启用" :checked="is_show==1">
                        <input type="radio" name="is_show" lay-filter="is_show" autocomplete="off" value="2" title="禁用" :checked="is_show==2">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">巡检类目</label>
                <div class="layui-input-block">
                    <draggable v-model="attr_value">
                        <div v-for="(item, index) in attr_value" :key="index" v-bind:index="index" class="item" style="margin-bottom: 5px;">
                            <input type="text" v-model="item.name" placeholder="请输入巡检类目名称" class="layui-input" style="width: 310px;display: inline-block" lay-verify="required" autocomplete="off"/>
                            <input type="text" v-model="item.value"  placeholder="请输入属性可选值" readonly  class="layui-input" style="width: 110px;display: inline-block" lay-verify="required" autocomplete="off"/>

                            <button class="layui-btn layui-btn-danger" type="button" v-on:click="del_attr_value(index)">删除</button>
                        </div>
                    </draggable>
                    <div class="layui-form-mid layui-word-aux">多个属性值需要用英文逗号" , "隔开,入库商品是即可下拉选择属性值</div>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" type="button" v-on:click="add_attr_value">   添加属性</button>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea  v-model="remark"  placeholder="请输入备注说明" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <button class="layui-btn layui-btn-sm layui-btn-normal" type="button" v-on:click="confirm_save">确定保存</button>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
{__block__}
{js href="/static/property/js/vue.min.js,/static/property/js/vue-module/vuedraggable/Sortable.min.js,/static/property/js/vue-module/vuedraggable/vuedraggable.umd.min.js" /}
<script>
    let draggable = vuedraggable;
    var app = new Vue({
        el: '#app',
        components: {
            draggable,
        },
        data: {
            add_rule: 2,
            site_name: '',
            is_show : 1,
            remark : '',
            property_id : '',
            attr_value: [
                {
                    name: '',
                    value: '正常，异常'
                }
            ]
        },
        methods: {
            add_attr_value() {
                this.attr_value.push({
                    name: '',
                    value: '正常，异常'
                });
            },
            del_attr_value(rowIndex) {
                let that = this;
                layer.confirm('是否确认删除此属性?', function(index) {
                    layer.close(index);
                    that.attr_value.splice(rowIndex, 1);
                });
            },
            confirm_save() {
                if(this.site_name == '') {
                    return layer.msg('请输入属性模板名称');
                }
                let attrValue = [];
                let repeatAttr = false;
                for(const key in this.attr_value) {
                    if(this.attr_value[key].name !== '') {
                        for(const key2 in attrValue) {
                            if(attrValue[key2].name === this.attr_value[key].name) {
                                repeatAttr = true;
                                break;
                            }
                        }
                        if(repeatAttr) {
                            break;
                        }
                        attrValue.push(this.attr_value[key])
                    }
                }
                if(repeatAttr) {
                    return layer.msg('存在重复的属性名');
                }
                if(attrValue.length == 0) {
                    return layer.msg('请至少添加一条属性')
                }
                var loadAdd = layer.msg('保存中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                $.post("{:url('propertyInspectionSiteAdd')}", {
                    remark:this.remark,
                    is_show:this.is_show,
                    site_name:this.site_name,
                    attr_value:this.attr_value,
                    property_id:this.property_id,
                }, function (res) {
                    layer.close(loadAdd);
                    if (res.code === 0) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.layer.msg(res.msg, {icon: 6, offset: '15px'});
                    } else {
                        layer.msg(res.msg, {icon: 5, offset: '15px'});
                    }
                });
                return false;
            }
        }
    });

    layui.use(['form'], function() {
        var form = layui.form
        form.on('radio(is_show)', function(item) {
            app.is_show = item.value
        })
    })
</script>
{/block}